<template>
  <div class="m-classify-mange">
    <div class="add-btn">
      <w-button type="option" @on-click="onAddClassify('one', '', '')">新增</w-button>
    </div>
    <!-- 新增分类 -->
    <div class="m-add-options">
      <!-- 分类名称 -->
      <!-- <w-table :columns="columns"></w-table> -->
      <div class="title-nav clearfix">
        <span class="fl">分类名称</span>
        <span class="fr">操作</span>
      </div>
      <!-- 分类列表 -->
      <div class="add-classify" v-for="(list, listIndex) in commonList" :key="listIndex">
        <!-- 一级分类 -->
        <div class="classify-one clearfix">
          <div class="clssify fl">
            <span class="icon-classify" :class="{'icon-more': list.isShow, 'icon-little': !list.isShow}" @click="list.isShow = !list.isShow"></span>
            <span style="font-size: 14px;">{{list.className}}<span class="c-main">（{{list.sequence}}）</span></span>
            <button class="add" @click="onAddClassify('other', list, '')">+新增下级</button>
          </div>
          <div class="options fr">
            <div class="edit" @click.stop="onAddClassify('update', list, '')">
              <span class="icon-edit"></span>
              <span>修改</span>
            </div>
            <div class="del" @click.stop="onDeleteClassify(list.id)">
              <span class="icon-del"></span>
              <span>删除</span>
            </div>
          </div>
        </div>

        <!-- 二级以下的分类 -->
        <div v-if="list.isShow">
          <div v-for="(two, twoIndex) in list.twoGoodsClasss" :key="twoIndex">
            
            <!-- 二级分类 -->
            <div class="classify-one clearfix" style="padding-left: 6%">
              <div class="clssify fl">
                <span class="icon-classify" :class="{'icon-more': two.isShow, 'icon-little': !two.isShow}" @click="two.isShow = !two.isShow"></span>
                <span>{{two.className}}<span class="c-main">（{{two.sequence}}）</span></span>
                <button class="add" @click="onAddClassify('other', two, list)">+新增下级</button>
              </div>
              <div class="options fr" @click.stop="onAddClassify('update', two, list)">
                <div class="edit">
                  <span class="icon-edit"></span>
                  <span>修改</span>
                </div>
                <div class="del" @click.stop="onDeleteClassify(two.id)">
                  <span class="icon-del"></span>
                  <span>删除</span>
                </div>
              </div>
            </div>

            <!-- 三级分类 -->
            <div v-if="two.isShow">
              <div class="classify-one clearfix" style="padding-left: 9%" v-for="(three, threeIndex) in two.threeGoodsClasss" :key="threeIndex">
                <div class="clssify fl">
                  <!-- <span class="icon-classify icon-little"></span> -->
                  <span>{{three.className}}<span class="c-main">（{{three.sequence}}）</span></span>
                  <!-- <button class="add">+新增下级</button> -->
                </div>
                <div class="options fr" @click.stop="onAddClassify('update', three, two)">
                  <div class="edit">
                    <span class="icon-edit"></span>
                    <span>修改</span>
                  </div>
                  <div class="del" @click.stop="onDeleteClassify(three.id)">
                    <span class="icon-del"></span>
                    <span>删除</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 新增分类 -->
    <w-panel-validate :height="`380px`" v-model="addClassifyPanel" confirm-text="提交" @on-confirm="onConfirmAddClassifyOne" @on-cancel="onCancel">
      <div class="panel-classify">
        <!-- 新增二级以下分类 -->
        <div v-if="showType != 'one' && breamCream.length">
          <span class="title">上级分类：</span>
          <div class="name">
            <span>{{breamCream.join('>')}}</span>
          </div>
        </div>
        <!-- 新增分类 -->
        <div>
          <span class="title">分类名称</span>
          <div class="name">
            <w-input rule="isEmpty" error="请输入" v-model="classifyParams.className"></w-input>
          </div>
        </div>
        <div>
          <span class="title">分类类型</span>
          <div class="name">
            <w-select :options="classifyList" v-model="classifyParams.goodsTypeId"></w-select>
          </div>
        </div>
        <div>
          <span class="title" style="vertical-align: top;">显示</span>
          <div class="name">
            <w-switch v-model="classifyParams.display" @on-change="onChangeSwitch"></w-switch>
          </div>
        </div>
        <div>
          <span class="title">排序</span>
          <div class="name" style="width: 114px">
            <w-input rule="isEmpty|onlyInt" error="请输入|请输入数字" v-model="classifyParams.sequence"></w-input>
          </div>
        </div>
      </div>
    </w-panel-validate>

  </div>
</template>

<script>
import { apiClassifyMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      curClassify: -1, // 当前展示的分类
      curClassifyTwo: -1, // 当前二级展示的分类
      showAll: true, // 收起当前一级分类
      showMore: true, // 收起三级分类
      columns: [
        {title: '分类名称', width: '70%'},
        {title: '操作', width: '24%'}
      ],
      addClassifyPanel: false, // 新增分类弹框
      showType: 'one', // 判断新增分类层级
      commonList: [],
      classifyList: [], // 分类
      breamCream: [], // 新增分类--上级分类
      params: {
        'accessToken': '',
        'threeMenuCode': this.$route.query.three || '',
        'type': 'all'
      },
      // 新增/修改数据
      classifyParams: {
        'accessToken': '',
        'threeMenuCode': this.$route.query.three || '',
        'display': true, // 1显示，0不显示
        'className': '',
        'sequence': 0,
        'goodsTypeId': '',
        'parentId': null, // 新增2级以下
        'id': null // 修改时传入
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.params.accessToken = this.token
    this.fetchCommonClassify()
    this.fetchGoodsClassify()
  },
  methods: {
    /**
     * 获取通用分类列表
     */
    fetchCommonClassify() {
      apiClassifyMange.apiCommonClassify(this.params).then(data => {
        this.commonList = data.data || [] // 通用分类数据
        let _this = this
        if (this.commonList && this.commonList.length) {
          _this.commonList.forEach(one => {
            _this.$set(one, 'isShow', true)
            one.twoGoodsClasss.forEach(two => {
              _this.$set(two, 'isShow', true)
            })
          })
        }
      })
    },
    /**
     * 商品类型查询
     */
    fetchGoodsClassify() {
      apiClassifyMange.apiGoodsClassify(this.params).then(data => {
        this.classifyList = data.data || []
        if (this.classifyList && this.classifyList.length > 0) {
          this.classifyList = this.classifyList.map(list => {
            return {
              label: list.name,
              value: list.id
            }
          })
        }
      })
    },
    /**
     * 新增分类展示弹框
     */
    onAddClassify(type, classify, pClassify) {
      this.breamCream = [] // 每次新增之前，清空上级分类
      this.addClassifyPanel = true
      this.showType = type
      if (type == 'other') {
        this.classifyParams.parentId = classify.id
      } else if (type == 'update') {
        this.classifyParams.id = classify.id
        apiClassifyMange.apiCommonClassifyEdit(this.token, this.$route.query.three, this.classifyParams.id).then(data => {
          this.classifyParams = data.data || {}
        })
      }
      if (pClassify.className) {
        this.breamCream.push(pClassify.className)
      }
    },
    /**
     * 删除通用分类
     */
    onDeleteClassify(ids) {
      let _this = this
      const arr = []
      arr.push(ids)
      this.$modal({
        title: '提示',
        content: '确认删除？',
        onConfirm() {
          apiClassifyMange.apiCommonClassifyDelete(_this.token, _this.$route.query.three, arr).then(data => {
            _this.$toast('删除成功！', () => {
              _this.fetchCommonClassify()
            })
          })
        }
      })
    },
    /**
     * radio--切换显隐操作
     */
    onChangeSwitch(choice) {
      if (choice == 'false') {
        this.classifyParams.display = false
      } else {
        this.classifyParams.display = true
      }
    },
    /**
     * 新增分类
     */
    onConfirmAddClassifyOne() {
      if (!this.classifyParams.className) {
        this.$toast('请输入分类名')
        return
      } else if (!this.classifyParams.goodsTypeId) {
        this.$toast('请选择分类')
        return
      }
      this.classifyParams.accessToken = this.token
      this.classifyParams.threeMenuCode = this.$route.query.three || ''
      apiClassifyMange.apiCommonClassifyUpdate(this.classifyParams).then(data => {
        this.$toast(this.showType == 'update' ? '修改成功' : '新增成功', () => {
          this.addClassifyPanel = false
          this.classifyParams.className = ''
          this.classifyParams.goodsTypeId = ''
          this.classifyParams.display = true
          this.classifyParams.sequence = 0
          this.fetchCommonClassify()
        })
      })
    },
    /**
     * 清空弹框
     */
    onCancel() {
      this.classifyParams = {}
    }
  }
}
</script>

<style lang="scss">
.m-classify-mange {
  .add-btn {
    .btn {
      width: 70px;
      height: 28px;
      border: 1px solid #9E9E9E;
      font-size: 12px;
    }
  }
  .table {
    border-bottom: none;
    th {
      border-bottom: none;
    }
  }
  .panel-classify {
    .btn-group {
      button {
        margin-right: 40px
      }
    }
  }
}
</style>


<style lang="scss" scoped>
@import '../../scss/_var.scss';
.add-btn {
  margin: 20px 0 10px;
}

// 点击展开--加号
.icon-more {
  background-image: url(../../assets/classify-more-big.png)
}
// 点击收起--减号
.icon-little {
  background-image: url(../../assets/classify-big.png);
}
.m-add-options {
  .title-nav {
    border: 1px solid #e0e0e0;
    background: #fff;
    font-size: 12px;
    border-bottom: none;
    height: 30px;
    line-height: 30px;
    background: #f0f0f0;
    color: #4A4A4A;
    span {
      &:first-child {
        margin-left: 138px;
      }
      &:last-child {
        margin-right: 140px
      }
    }
  }
  .add-classify {
    width: 100%;
    font-size: 12px;
    border: 1px solid $border-gray-light;
    border-top: none;
    .classify-one {
      height: 46px;
      line-height: 46px;
      padding-left: 3%;
      border-top:  1px solid $border-gray-light;
    }
  }
  .add {
    border: 1px solid #DBDBDB;
    width: 70px;
    height: 22px;
    border-radius: 2px;
    font-size: 12px;
    margin-left: 10px; 
  }
  .icon-classify {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 12px;
    vertical-align: sub;
    cursor: pointer;
    background-repeat: no-repeat;
  }
  .clssify {
    width: 70%;
    display: inline-block;
  }
  .options {
    width: 300px;
    display: inline-block;
    text-align: center;
    color: #2D8EFE;
    & > div {
      display: inline-block;
      margin: 0 20px;
      cursor: pointer;
    }
    
    .icon-edit {
      width: 12px;
      height: 12px;
      vertical-align: sub;
      background: url(../../assets/icon-edit.png) no-repeat;
      display: inline-block;
      cursor: pointer;
    }
    .icon-del {
      display: inline-block;
      width: 12px;
      height: 12px;
      vertical-align: sub;
      background: url(../../assets/del-bush.png) no-repeat;
      cursor: pointer;
    }
  }
}
.panel-classify {
  width: 306px;
  margin: 0 auto;
  & > div {
    margin-bottom: 20px;
  }
  .title {
    display: inline-block;
    width: 60px;
    text-align: left;
    font-size: 12px;
  }
  .name {
    display: inline-block;
    width: 230px;
  }
}
</style>
